<template>
  <div style="height: 100%; width: 100%;" ref="isechart"></div>
</template>
<script>
var echarts = require('echarts');
export default {
  props: {
    chartData: {  
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
        };
      },
    },
    isAxisChart: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      echart: null,
      axisOptions: {
        //有x、y轴图表
        xAxis: { 
            //x轴 数据
            type: "category",
            name:'时间',   
            boundaryGap: true,
            data: [],
            axisLine: {
              lineStyle: {
                 color: '#17b3a3'
              }
            },
            axisLabel: {
              color: '#333',
              fontWeight: 'bold'
            }
        },
        yAxis: {
            //y轴 数据
            type: "value",
            name:'数量',
            show: true,
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                 color: '#17b3a3'
              }
            }
        },
        series: [], //内容数据     
        //图表颜色
        color: [
          '#2ec7c9',
          '#b6a2de',
          '#5ab1ef',
          '#ffb980',
          '#d87a80',
          '#8d98b3',
          '#e5cf0d',
          '#97b552',
          '#95706d',
          '#dc69aa',
          '#07a2a4',
          '#9a7fd1',
          '#588dd5',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ],
        //图例文本颜色
        legend: {
            textStyle: {
              color: '#333'
            }
        },
        //鼠标悬浮提示数据
        tooltip: {
           show: true,
           trigger: 'axis',
           axisPointer: {
             type: 'line'
           }
        },
        //图表位移
        grid: {  
          left: '13%',
          width: 'auto'
        },
        //图表标题
        title: {
          text: '',
          textStyle: {
            color: '#999999',
            fontSize: '14px'
          }        
        }
      },
      normalOption: {
        legend: {
            orient: 'vertical',
            left: 0,
            data: ['SpringBoot','vue','小程序','Java','Es6','javascript']
        },
        //没有x、y轴的图表
        series: [], //内容数据
        color: [
            '#0f78f4',
            '#dd536b',
            '#9462e5',
            '#a6a6a6',
            '#e1bb22',
            '#39c362',
            '#3ed1cf'
        ],
        tooltip: {
           trigger: 'item'
        },
        //图表标题
        title: {
          text: '',
          textStyle: {
            color: '#999999',
            fontSize: '14px'
          },
          bottom : '1%'
        },
  
      }
    };
  },
  watch: {   //监听父传过来的数据
    chartData: {
        handler: function () {
           this.initChart()   //监听到变化就初始化图表数据
        },
        deep: true
        // immediate:true
    },
    //监听折叠菜单控制自适应图标
    isCollapse() {
      setTimeout(()=>{
         this.resizeChart()
      },300)
    }
  },
  computed: {
    //判断是否有x，y轴使用相应的图表数据格式
    options() {
      return this.isAxisChart ? this.axisOptions : this.normalOption;
    },
    //获取是否折叠菜单的控制值
    isCollapse() {
      return this.$store.state.tab.isCollapse
    }
  },
  mounted() {
      window.addEventListener("resize", this.resizeChart)  //添加事件 
  },
  destroyed() {  //销毁的时候清除事件，防止内存泄漏
      window.removeEventListener("resize", this.resizeChart)
  },
  methods: {
    //初始化图表方法
    initChart() {
      this.initChartData();    //先渲染数据再初始化图表
      if (this.echart) {
        //已经初始化就使用刚指定的配置项和数据显示图表。
        this.echart.setOption(this.options);
      } else {
        console.log("走false");
        //未初始化，就获取装图表dom元素 初始化echarts实例c
        this.echart = echarts.init(this.$refs.isechart); //初始化
        this.echart.setOption(this.options); //生成配置数据显示
      }
    },
    //两种图表的数据操作方法
    initChartData() {
      if (this.isAxisChart) {   //有x轴的
        this.axisOptions.xAxis.data = this.chartData.xData;   //将父组件传过来的数据赋值上去
        this.axisOptions.series = this.chartData.series;
        this.axisOptions.title.text = this.chartData.text
      } else {   //没有x轴的
        console.log(this.chartData.series);
        this.normalOption.series = this.chartData.series
        console.log(this.normalOption.series);
        this.normalOption.title.text = this.chartData.text
      }
    },
    // 自适应图标判断方法
    resizeChart() {
      this.echart ? this.echart.resize() : '';
    }
  }
};
</script>

<style scoped>
</style>